import './index.less';
import { Grid } from 'react-vant';
import { staticModeList, deviceId } from '../../utils/staticData';
import { useRef, useEffect, useState } from 'react';
import SvgIcon from '../../components/SvgIcon/index';

export default function Mode({ props, onLoopClick }: any) {
  const Hejia = (window as any).Hejia;

  const { mode, isOnline, status } = props;
  const [selectedItemId, setSelectedItemId] = useState<number | null>(null);

  /**
   * useEffect 和 componentDidMount 是用于在 React 组件中处理副作用的两种不同的方法。
   * componentDidMount 是类组件中的生命周期方法，它在组件挂载到 DOM 后立即调用。
   * 你可以在 componentDidMount 中执行一些初始化操作，比如数据获取、订阅事件等。它只会在组件挂载时执行一次。
   *
   * useEffect 是 React 的函数式组件中的 Hook。
   * 它用于处理副作用，可以在组件的生命周期中模拟 componentDidMount、componentDidUpdate 和 componentWillUnmount 这三个生命周期方法的功能。
   *
   * useEffect 接受两个参数：一个是回调函数，用于定义副作用的逻辑；
   * 另一个是依赖数组，用于指定副作用的触发条件。
   * 当依赖数组发生变化时，useEffect 将重新执行副作用逻辑，类似于 componentDidUpdate。
   * 如果依赖数组为空，useEffect 只会在组件挂载和卸载时执行，相当于 componentDidMount 和 componentWillUnmount。
   */

  useEffect(() => {
    setSelectedItemId(mode);
  }, [mode]);

  /**
   * 以 use 开头的函数被称为 Hook
   */
  const lastClickTimeRef = useRef(0);
  /**
   * Handles the click event for the mode.
   *
   * @param {number} id - The id of the mode.
   * @return {void} This function doesn't return anything.
   */

  const timeout = useRef<NodeJS.Timeout | null>(null);
  const handleModeClick = (id: number): void => {
    if (id === selectedItemId) return; // 正在运行的模式，不可重复下发

    onLoopClick(false);
    setSelectedItemId(id);

    clearTimeout(timeout.current as NodeJS.Timeout);
    timeout.current = setTimeout(() => {
      Hejia.setControlParam(
        {
          // deviceId,
          parameters: {
            param: [
              {
                name: 'mode',
                content: id
              }
            ]
          }
        },
        function () {
          // success, no response
          onLoopClick(true);
          console.log('success');
        },
        function (msg: string, obj: any) {
          console.log(msg + obj.resultCode + obj.resultCodeMessage);
        }
      );
    }, 500);
  };

  useEffect(() => {
    return () => {
      // 组件卸载时重置点击时间
      lastClickTimeRef.current = 0;
    };
  }, []);

  return (
    <div className="mode">
      <div
        className={
          !isOnline || status === 1 || status === 2 || status === 3
            ? 'offline-title'
            : 'title'
        }
      >
        模式
      </div>
      <div className="mask-wapper">
        {(!isOnline || status === 1 || status === 2 || status === 3) && (
          <div className="mask"></div>
        )}
        <div className="mode-wapper">
          <Grid columnNum={4}>
            {staticModeList.map(item => (
              // react传递参数必须是回调函数
              <Grid.Item key={item.id} onClick={() => handleModeClick(item.id)}>
                <div
                  // className={`item ${
                  //   item.id === selectedItemId ? 'active' : ''
                  // }`}
                  className={`item ${
                    item.id === selectedItemId ? 'active' : ''
                  }`}
                >
                  <SvgIcon
                    name={`${item.id}`}
                    size="46"
                    // color={`${
                    //   item.id === selectedItemId
                    //     ? '#00D8AF'
                    //     : isOnline
                    //     ? 'rgba(0,0,0,0.8)'
                    //     : 'rgba(0,0,0,0.2)'
                    // }`}
                    color={`${
                      !isOnline
                        ? 'rgba(0,0,0,0.4)'
                        : item.id === selectedItemId
                        ? '#00D8AF'
                        : 'rgba(0,0,0,0.8)'
                    }`}
                  />
                  <span
                    style={{
                      color: !isOnline
                        ? 'rgba(0,0,0,0.4)'
                        : item.id === selectedItemId
                        ? '#00D8AF'
                        : 'rgba(0,0,0,0.8)'
                    }}
                  >
                    {item.title}
                  </span>
                </div>
              </Grid.Item>
            ))}
          </Grid>
        </div>
      </div>
    </div>
  );
}
